<template>
  <div>
    <eagle-dialog-page
      :url="url"
      :params="params"
      @initList="_initList"
      @open="open"
      @submit="submit"
      @callbackDialog="callbackDialog"
      @setData="setData"
      v-bind="$attrs"
      v-on="$listeners"
      ref="eagleDialogPage"
      :option="option"
      :title="title"
      :selectedValue="selectedValue"
    >
      <eagle-cell
        v-for="(item, index) in list"
        :key="index"
        style="margin-top: 10px"
      >
        <div class="user-item">
          <div style="width: 90%">
            <eagle-card>
              <template #title>
                <h3>{{ item.CertName }}</h3>
              </template>
              <template #thumb>
                <!-- <img src="baseUrl + item.AttCover" alt=""> -->
                <eagle-image
                  :src="baseUrl + item.AttCover"
                  width="80"
                  height="80"
                />
              </template>
              <template #desc>
                <div>{{ item.AttName }}</div>
                <div>上传时间：{{ item.CreateDate }}</div>
              </template>
              <template #footer>
                <div class="footer-btns">
                  <eagle-button size="mini" @click="edit(item)"
                    >重命名</eagle-button
                  >
                  <eagle-button size="mini" @click="handleDelete(item)"
                    >删除</eagle-button
                  >
                  <!-- <eagle-button size="mini" @click="submit(item)"
                    >选择</eagle-button
                  > -->
                </div>
              </template>
            </eagle-card>
          </div>
          <div style="width: 10%">
            <eagle-radio
              :name="item.AttCode"
              @click="radioClick(item)"
            ></eagle-radio>
          </div>
        </div>
      </eagle-cell>
    </eagle-dialog-page>
    <eagle-dialog
      v-model="show"
       title="修改附件名称"
	   :titlePosition="'center'"
      :showButtons="false"
      :closeOnClickOverlay="true"
      @confirm="handleConfirm()"
      show-cancel-button
      show-confirm-button
    >
      <eagle-form>
        <eagle-input
            clickable
            name="Title"
            v-model="form.AttName"
            placeholder="请输入"
            isInputText
        ></eagle-input>
      </eagle-form>
    </eagle-dialog>
  </div>
</template>
<script>
import { Dialog } from 'vant'
export default {
  name: "file-choose-dialog",
  props: {
    title: {
      type: String,
      default: "附件库",
    },
    selectedValue: {
      type: String,
      default: () => "",
    },
    url: {
      type: String,
      default: "/CommonAttach/GetPageData",
    },
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      list: [],
      params: [
        {
          dataType: "List",
          page: 0,
        },
      ],
      selectedData: [],
      selecteCode: [],
      result: "",
      option: { name: "AttName", code: "AttCode" },
      simSelectObject: { code: "", name: "" },
      multiselectedlist: [],
      fileRowIndex: -1,
      show: false,
      form: {},
    };
  },
  created() {},
  computed: {
    multi: {
      get() {
        if (this.$attrs.isMulti) {
          return this.$attrs.isMulti;
        } else {
          return false;
        }
      },
    },
  },
  methods: {
    callbackDialog(data) {
        
      if (!data || data.length == 0) {
        this.$toast("您还未选择附件");
        return false;
      }
      if (this.multi) {
        this.$emit("callback", data);
      } else {
        this.$emit("callback", data);
      }
    },
    _initList(list) {
      if (
        this.$attrs.isOpenNew ||
        (this.$attrs.rowIndex && this.$attrs.rowIndex != this.fileRowIndex)
      ) {
        this.fileRowIndex = this.$attrs.rowIndex;
        this.multiselectedlist = [];
      }
      this.list = list;
      this.selecteCode = [];
      this.multiselectedlist = [];
      var newData = [];
      if (!this.multi) {
        newData = [{ code: this.selectedValue, AttCode: this.selectedValue }];
      } else {
        var data1 = [];
        var data2 = [];
        var tagData = [];

        if (this.selectedValue) {
          data1 = this.selectedValue.split(",");
          data1.forEach((item1) => {
            data2 = list.filter((item) => item.AttCode == item1);
            tagData.push(data2);
          });
          for (var i = 0; i < tagData.length; i++) {
            var innerItem = tagData[i];
            this.selecteCode.push(innerItem[0].AttCode);
            newData.push({
              AttCode: innerItem[0].AttCode,
              AttName: innerItem[0].AttName,
              code: innerItem[0].AttCode,
              name: innerItem[0].AttName,
            });
          }
        }
      }
      this.$refs.eagleDialogPage.initSeletedData(newData);
      this.multiselectedlist = newData;
    },
    open(list) {
      this.list = list;
    },
    submit() {
        
      this.$refs.eagleDialogPage.submit();
    },
    setData(data) {
      if (this.multi) {
        this.multiselectedlist = data;
      } else {
        this.simSelectObject = data;
      }
    },
    deleteSelect(code) {
      this.$refs.eagleDialogPage.deleteSelect(code);
    },
    clearAttCode() {
      this.$refs.eagleDialogPage.confirm();
    },
    radioClick(item) {
        
      let resultRadio = Object.assign({ code: "", name: "" }, item);
      resultRadio.code = item.AttCode;
      resultRadio.name = item.AttName;
      this.$emit("callback", resultRadio);
      this.$emit("update:show", false);
    },
    edit(obj) {
      if (obj) {
        this.form.ID = obj.ID;
        this.form.AttName = obj.AttName;
      } else {
        this.form = {};
      }

      this.show = true;
    },
    handleConfirm() {
        let _this = this;
        _this.$axios
        .post("/CommonAttach/EditName",this.form)
        .then((res)=>{
            _this.$toast.success("编辑成功！");
            _this.$refs.eagleDialogPage.confirm();
        })
    },
    handleDelete(item) {
      Dialog.confirm({
        title: "询问",
        message: "确定要删除该条记录吗?",
      })
        .then(() => {
          // on confirm
          let _this = this;
          _this.$axios
          .get("/CommonAttach/Delete",{params:{id: item.ID}})
          .then((res)=>{
            _this.$toast.success("删除成功！");
            _this.$refs.eagleDialogPage.confirm();
          })
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>
<style lang="less" scoped>
.user-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.risk {
  height: 100vh;
  background-color: #e8f1f8;
  .info_search {
    padding: 10px;
    border-radius: 5px !important;
    .van-field__control {
      background-color: #ffffff !important;
    }
  }
}
.all_dep {
  background-color: #ffffff;
}
.van-cell {
  padding: 0 0;
  border-radius: 8px;
}
.warn_item {
  /*margin-bottom: 10px;*/
  padding: 10px 0 10px 10px;
  border-radius: 5px;
  position: relative;
}
.warn_header {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 10px;
  .warn_tag {
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 26.64rem 0 0 26.64rem;
  }
}
.dep_sort {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  img {
    height: 15px;
    width: 15px;
    margin-right: 5px;
  }
}
.dep_btm {
  display: flex;
  justify-content: flex-end;
  .btm_item {
    display: flex;
    align-items: center;
    img {
      height: 15px;
      width: 15px;
      margin-right: 5px;
    }
  }
}
.van-image {
  box-shadow: 3px 3px 3px #ccc;
}
.tags {
  position: absolute;
  right: 0;
  top: 10px;
  border-radius: 26.64rem 0 0 26.64rem;
}
.file-list {
  background-color: #e8f1f8;
}
</style>
